﻿
<!DOCTYPE html><!--声明为 HTML5 文档-->
<html lang="en"><!--元素是 HTML 页面的根元素-->
<head>
    <meta charset="UTF-8"><!--对于中文网页需要使用这个语句声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。-->
    <link rel="stylesheet" type="text/css" href="mystyle.css"><!--外部引用css-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。-->
    <base href="http://www.runoob.com/images/" target="_blank"><!--默认属性-->
    <title>HTML和HTML5</title><!--元素描述了文档的标题-->
    <style type="text/css">
        p {color: grey;}
        #div3{
            width:200px;height:125px;padding:10px;border:1px solid #aaaaaa;
        }
        h4{
            color: firebrick;
        }
    </style><!--内部样式表-->
<script>
    function allowDrop(ev)
    {
        ev.preventDefault();
    }
    
    function drag(ev)
    {
        ev.dataTransfer.setData("Text",ev.target.id);
    }
    
    function drop(ev)
    {
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
    </script>
    <script>
        var x=document.getElementById("demo");
        function getLocation()
        {
            if (navigator.geolocation)
            {
                navigator.geolocation.getCurrentPosition(showPosition);
            }
            else
            {
                x.innerHTML="该浏览器不支持获取地理位置。";
            }
        }
        
        function showPosition(position)
        {
            x.innerHTML="纬度: " + position.coords.latitude + 
            "<br>经度: " + position.coords.longitude;	
        }
        </script>
</head><!-- 元素包含了文档的元（meta）数据-->
<body><!--元素包含了可见的页面内容-->
    <h1>HTML</h1><!--<h1> - <h6> -->
    <h2>这是标题 2</h2>
     <hr>
    <p>这个<br>段落<br>演示了分行的效果</p>
    <b>加粗文本</b><br><br>
    <i>斜体文本</i><br><br>
    <code style="color: brown;">电脑自动输出</code><br><br><!--内联样式-->
    这是 <sub> 下标</sub> 和 <sup> 上标</sup>
    <a href="https://www.baidu.com" target="_blank">
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"  alt="这张网络图被移除" width="200px" />
    </a>
    <table border="1" width="800">
        <tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th></tr>
        <tr align="center">
            <td>1</td><td>张三</td><td>18</td><td>女</td>
        </tr>
        <tr align="right">
            <td>2</td><td>李四</td><td>20</td><td rowspan ="3">男</td>
        </tr>
                        <tr>
            <td colspan="3">2</td>
        </tr>
                        <tr>
            <td>2</td><td>李四</td><td>20</td>
        </tr>
    </table>
    <h4>无序列表</h4>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
    <h4>有序列表</h4>
    <ol start="50">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <h4>自定义列表</h4>
    <dl>
        <dt>Coffee</dt>
        <dd>Black hot drink</dd>
        <dt>Milk</dt>
        <dd>White cold drink</dd>
    </dl>
    <div style="color:#0000FF">
        <h3>这是一个在 div 元素中的标题。</h3>
        <p>这是一个在 div 元素中的文本。</p>
    </div>
    <p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>
    <h4>布局</h4>
    <div id="container" style="width:500px">

        <div id="header" style="background-color:#FFA500;">
        <h1 style="margin-bottom:0;">主要的网页标题</h1></div>
        
        <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
        <b>菜单</b><br>
        HTML<br>
        CSS<br>
        JavaScript</div>
        
        <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
        内容在这里</div>
        
        <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
        版权 © runoob.com</div>
        
    </div>
    <h4>表单</h4>
    <form action="" method="post">
        TEXT:<input type="text" name="name" /><br />
        PASSWORD:<input type="password" name="pwd" /><br />
        RADIO:<input type="radio" name="sex">男
        <input type="radio" name="sex">女<br />
        SELECT:<select name="sel">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select><br />
        <input type="checkbox" name="aihao[]" value="book"/>看书
        <input type="checkbox" name="aihao[]" value="net"/>上网
        <input type="checkbox" name="aihao[]" value="game"/>游戏
        <input type="checkbox" name="aihao[]" value="girl"/>女<br/>
        <textarea name="jieshao" cols="50" rows="5"></textarea><br/>
        <input type="submit" name="sub" value="提交" />
        <input type="reset" name="reset" value="重置">
    </form>
    <iframe src="" name="iframe_a"></iframe>
    <p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
    <H4>JS</H4>
    <script>
        document.write("Hello World!<br>")
    </script> 
    <A href="https://www.runoob.com/html/html-entities.html">字符实体表达链接</A>
    <a href="https://www.runoob.com/html/html-tag-name.html">标签全写及全称</a>
    <h1>HTML5</h1>
    <h4>canvas画布与SVG</h4>
    <canvas id="myCanvas" width="600px" height="200px" style="border:1px solid #000000;">
        您的浏览器不支持 HTML5 canvas 标签。
        </canvas>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
            <polygon points="100,10 40,180 190,60 10,60 160,180"
            style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
         </svg>
         <h4>拖放</h4>
         <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
         <img id="drag1"src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" draggable="true" ondragstart="drag(event)"  alt="这张网络图被移除" width="200px" />
         <h4>定位</h4>
         <p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
         <button onclick="getLocation()">点我</button>
         <video width="320" height="240" controls>
            <source src="https://vd4.bdstatic.com/mda-jkv0w8kca40bv5aj/sc/mda-jkv0w8kca40bv5aj.mp4" type="video/mp4">
            <source src="movie.ogg" type="video/ogg">
            您的浏览器不支持 HTML5 video 标签。
          </video>
          <audio controls>
            <source src="horse.ogg" type="audio/ogg">
            <source src="https://ws.stream.qqmusic.qq.com/C400001QJyJ32zybEe.m4a" type="audio/m4a"><!--不支持m4a-->
          您的浏览器不支持 audio 元素。
          </audio>
          <h3>表单Input</h3>
          <form action="demo-form.php">
            选择你喜欢的颜色: <input type="color" name="favcolor"><br>
            <input type="submit"><br>
            生日: <input type="date" name="bday"><br>
            生日 (日期和时间): <input type="datetime" name="bdaytime"><br>
            生日 (日期和时间): <input type="datetime-local" name="bdaytime"><br>
            E-mail: <input type="email" name="usremail"><br>
            数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5"><br>
            Points: <input type="range" name="points" min="1" max="10"><br>
            Search Google: <input type="search" name="googlesearch"><br>
            电话号码: <input type="tel" name="usrtel"><br>
            选择时间: <input type="time" name="usr_time"><br>
            添加你的主页: <input type="url" name="homepage"><br>
            选择周: <input type="week" name="year_week">
            <input list="browsers" name="browser">
            <datalist id="browsers">
                <option value="Internet Explorer">
                <option value="Firefox">
                <option value="Chrome">
                <option value="Opera">
                <option value="Safari">
                </datalist>
                用户名: <input type="text" name="usr_name">
                加密: <keygen name="security">
                    <input type="submit">
          </form> 
          <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
            <input type="range" id="a" value="50">100
            +<input type="number" id="b" value="50">
            =<output name="x" for="a b"></output>
            </form>
            <h3>语义元素</h3>
            <section>
                <h1>WWF</h1>
                <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
              </section>
              
              <section>
                <h1>WWF's Panda symbol</h1>
                <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
              </section>
              <article>
                <h1>Internet Explorer 9</h1>
                <p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
              </article>
              <nav>
                  导航
                <a href="/html/">HTML</a> |
                <a href="/css/">CSS</a> |
                <a href="/js/">JavaScript</a> |
                <a href="/jquery/">jQuery</a>
                </nav>
                <div id="result"></div>

</body>
<script>
if(typeof(Storage)!=="undefined")
{
  localStorage.sitename="菜鸟教程";
  document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;
}
else
{
  document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
</script>

<script>

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var grd=ctx.createRadialGradient(75,50,5,90,60,100);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    ctx.fillStyle=grd;
    ctx.fillRect(0,0,150,75);
    ctx.moveTo(150,0);
    ctx.lineTo(350,75);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(75,125,50,0,1.8*Math.PI);
    ctx.stroke();
    ctx.font="30px Arial";
    ctx.strokeText("Hello World",150,75);
    ctx.fillText("Hello World",150,150);
    var img = new Image();
            img.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";
    
            img.onload = function () {
                ctx.drawImage(img, 350, 0);
            }
    </script>
</html>